import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_network/service_url.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wallet_utils/button_style.dart';
import 'package:wallet_utils/color.dart';
import 'package:wallet_utils/ht_appbar.dart';
import 'package:wallet_utils/text_style.dart';
import 'package:wallet_utils/toast.dart';
import 'package:wallet_utils/webview_common.dart';
import 'logic.dart';

class SmsPage extends StatelessWidget {
  final logic = Get.put(SmsPageLogic());
  final state = Get
      .find<SmsPageLogic>()
      .state;
  FocusNode mobileFocusNode = FocusNode();
  FocusNode pwdFocusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(
        BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width,
            maxHeight: MediaQuery.of(context).size.height),
        context: context,
        designSize: const Size(375, 812),
        orientation: Orientation.portrait);
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: Material(
        child: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/bg_login.png"),
                fit: BoxFit.cover,
              ),
            ),
            child: Scaffold(
              backgroundColor: Colors.transparent,
              bottomNavigationBar: Visibility(
                visible: false,
                child: Container(
                  height: 80.w +  MediaQuery.of(context).padding.bottom,
                  alignment: Alignment.center,
                  margin: EdgeInsets.only(left: 60.w, right: 60.w, bottom:  MediaQuery.of(context).padding.bottom + 57.w),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      InkWell(
                        onTap: () {

                        },
                        child: Column(
                          children: [
                            Image.asset('images/ic_phone.png', width: 46.w, height: 46.w,),
                            SizedBox(height: 10.w,),
                            Text('其他号码登录', style: TextStyleUtils.style999999(fontSize: 12.sp),)
                          ],
                        ),
                      ),
                      InkWell(
                        onTap: () {

                        },
                        child: Column(
                          children: [
                            Image.asset('images/ic_lock.png', width: 46.w, height: 46.w,),
                            SizedBox(height: 10.w,),
                            Text('账号密码登录', style: TextStyleUtils.style999999(fontSize: 12.sp),)
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              body: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    height: ScreenUtil().statusBarHeight+108.w,
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 30.w),
                    child: Text(
                      '你好,\n欢迎登录-放鑫钱包',
                      style: TextStyleUtils.style000000(fontSize: 27.w, fontWeight: FontWeight.bold),
                    ),
                  ),
                  GetBuilder<SmsPageLogic>(builder: (logic) {
                    return accountInput();
                  }),
                  GetBuilder<SmsPageLogic>(builder: (logic) {
                    return smsCodeInput();
                  }),
                  GetBuilder<SmsPageLogic>(builder: (logic) {
                    return Container(
                      margin: EdgeInsets.only(left: 30.w, top: 24.w),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(right: 5.w),
                            child: GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: () {
                                logic.updateUserPrivary();
                              },
                              child: Container(
                                width: 16.w,
                                height: 16.w,
                                margin: const EdgeInsets.only(top: 4),
                                alignment: Alignment.center,
                                child: state.isAgreeUserPrivary
                                    ? Image.asset(
                                  "images/ic_agreement_checked.png",
                                  width: 11.w,
                                  height: 11.w,
                                )
                                    : Image.asset(
                                  "images/ic_agreement_unchecked.png",
                                  width: 11.w,
                                  height: 11.w,
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Text.rich(
                              TextSpan(
                                children: <InlineSpan>[
                                  TextSpan(text: "我已阅读并同意",
                                      style: TextStyleUtils.style999999(fontSize: 11.sp),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {}),
                                  TextSpan(
                                    text: "《使用条款》",
                                    style: TextStyle(color: ColorManager.color437EFF, fontSize: 11.sp, height: 1.5.w),
                                    // 设置点击事件
                                    recognizer: TapGestureRecognizer()
                                      ..onTap = () {
                                      Get.to(WebViewCommon(
                                        WebviewUrl.agreementService,title: '使用条款',
                                      ));
                                      },
                                  ),
                                  const TextSpan(
                                    text: "及",
                                  ),
                                  TextSpan(
                                    text: "《隐私协议》",
                                    style: TextStyle(color: ColorManager.color437EFF, fontSize: 11.sp, height: 1.5.w),
                                    // 设置点击事件
                                    recognizer: TapGestureRecognizer()
                                      ..onTap = () {
                                        Get.to(WebViewCommon(
                                          WebviewUrl.agreementPrivacy,title: '隐私协议',
                                        ));
                                      },
                                  ),
                                ],
                              ),
                              style: TextStyle(
                                color: ColorManager.color999999,
                                fontSize: 13.sp,
                                height: 1.5,
                              ),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    );
                  }),


                  loginBtn(),
                ],
              ),
            )

        ),
      ),
    );
  }

  //登录按钮
  Widget loginBtn() {
    return Container(
      margin: EdgeInsets.only(left: 30.w, right: 30.w, top: 50.w),
      width: double.infinity,
      height: 44.w,
      child: ElevatedButton(
          style: ButtonStyleUtils.buttonStyleF65247(),
          onPressed: () {
            logic.login();
          },
          child: Text("登录查看额度", style: TextStyleUtils.styleFFFFFF(fontSize: 14))),
    );
  }

  ///账号输入框
  Widget accountInput() {
    return Container(
      margin: EdgeInsets.only(left: 30.w, right: 30.w),
      child: Column(
        children: [
          SizedBox(
            child: TextField(
              controller: state.mobileController,
              keyboardType: TextInputType.number,
              focusNode: mobileFocusNode,
              inputFormatters: [LengthLimitingTextInputFormatter(11), FilteringTextInputFormatter.digitsOnly],
              cursorColor: ColorManager.colorF65247,
              cursorWidth: 1.w,
              style: TextStyle(fontWeight: FontWeight.w500, color: ColorManager.color2A2A2A),
              maxLength: 11,
              decoration: InputDecoration(
                border: InputBorder.none,
                contentPadding: EdgeInsets.only(top: 25.w),
                labelStyle:
                TextStyle(wordSpacing: 10.w, color: ColorManager.color2A2A2A, fontSize: 15.sp, fontWeight: FontWeight.w400),
                counterText: "",
                hintText: '请输入手机号',
                hintStyle: TextStyle(fontWeight: FontWeight.w400, color: ColorManager.colorCCCCCC, fontSize: 15.sp),
                focusColor: ColorManager.colorCCCCCC,
                hoverColor: ColorManager.colorCCCCCC,
                fillColor: ColorManager.colorCCCCCC,
//                contentPadding: EdgeInsets.all(10.0),
              ),
              onTap: () {
                logic.requestAccountFocus(mobileFocusNode, pwdFocusNode);
              },
              onChanged: (value) {
                if (value.length >= 11) {
                  //设置获取验证码颜色为红色  并且可点击
                  state.timerCountDownWidget.changeTextColor(false);
                  state.timerCountDownWidget.textIsTap(false);
                } else {
                  //设置获取验证码颜色为灰色  并且不可点击
                  state.timerCountDownWidget.changeTextColor(false);
                  state.timerCountDownWidget.textIsTap(false);
                }
                logic.allowLogin(state.mobileController, state.smsCodeController);
              },
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 12.w,),
            width: double.infinity,
            height: 0.5.w,
            color: ColorManager.colorE7E8E9,
          ),

        ],
      ),
    );
  }

  ///验证码输入框
  Widget smsCodeInput() {
    return Container(

      margin: EdgeInsets.only(left: 30.w, right: 30.w),

      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [

              Expanded(
                  child: SizedBox(
                    child: TextField(
                      controller: state.smsCodeController,
                      focusNode: pwdFocusNode,
                      cursorColor: ColorManager.colorF65247,
                      cursorWidth: 1.w,
                      keyboardType: TextInputType.number,
                      style: TextStyle(fontWeight: FontWeight.w500, color: ColorManager.color2A2A2A),
                      inputFormatters: [LengthLimitingTextInputFormatter(6), FilteringTextInputFormatter.digitsOnly],
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.only(top: 25.w),

                        labelStyle:
                        TextStyle(
                            wordSpacing: 10.w, color: ColorManager.color2A2A2A, fontSize: 15.sp, fontWeight: FontWeight.w400),
                        counterText: "",
                        // labelText: "手机号码",
                        hintText: '请输入验证码',
                        hintStyle: TextStyle(fontWeight: FontWeight.w400, color: ColorManager.colorCCCCCC, fontSize: 15.sp),
                        focusColor: ColorManager.colorCCCCCC,
                        hoverColor: ColorManager.colorCCCCCC,
                        fillColor: ColorManager.colorCCCCCC,
//                contentPadding: EdgeInsets.all(10.0),
                      ),
                      onTap: () {
                        logic.requestAccountFocus(mobileFocusNode, pwdFocusNode);
                      },
                      onChanged: (value) {
                        logic.allowLogin(state.mobileController, state.smsCodeController);
                      },
                    ),
                  )),
              Container(
                margin: EdgeInsets.only(top: 25.w),
                child: GestureDetector(
                  onTap: () {
                    if(state.isAgreeUserPrivary){
                      state.timerCountDownWidget.textIsTap(false);
                      state.timerCountDownWidget.startCounter();
                    }else{
                      state.timerCountDownWidget.textIsTap(true);
                      state.timerCountDownWidget.startCounter();
                      ToastUtils.showToast('请勾选并阅读协议');
                    }
                  },
                  child: state.timerCountDownWidget,
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 12.w,),
            width: double.infinity,
            height: 0.5.w,
            color: ColorManager.colorE7E8E9,
          ),
        ],
      ),
    );
  }
}


